<template>
	<div style="padding-bottom: 60px;">
		<div class="banner-editor" v-for="(item,index) in banner" :key="index">
			<div class="item-top clearfix">
				<span class="float-l color-3 f14">海报{{index+1}}</span>
				<div class="btn-group float-r clearfix">
					<div class="Icon float-l mr-10" @click="indexUp(index)">
						<svg height="14.4px" width="14.8px">
							<use xlink:href="#shangyi"/>
						</svg>
					</div>
					<div class="Icon float-l mr-10" @click="indexDown(index)">
						<svg height="14.4px" width="14.8px">
							<use xlink:href="#xiayi"/>
						</svg>
					</div>
					<div class="Icon float-l"  @click="delte(index)">
						<svg height="12.8px" width="12.8px">
							<use xlink:href="#shanchu"/>
						</svg>
					</div>
				</div>
			</div>
			<imageUpload :imageUrl="item.banner_url" :imageType="imageType"
						:index="index" @getImageUrl="updataBanner"></imageUpload>
			<p class="f12 color-6 sug">图片尺寸建议750×640px，格式支持png、jpg</p>
			<p class="jump">跳转链接</p>
			<div class="link">
				<span>
					{{item.banner_click_type=="product"?"商品链接"+" -":
					(item.banner_click_type=="shop_category"?"商品分类"+" -":"")}}
					{{item.banner_click_name}}
				 </span>
				<button class="btn-link" @click="showBomb(index)">
					<svg height="18px" width="18px">
						<use xlink:href="#xianjie"/>
					</svg>
				</button>
			</div>
			<el-dialog title="跳转链接" :visible.sync="dialogFormVisible"
				:modal-append-to-body="false" :lock-scroll="false"  style="text-align: left;">
				<el-tabs v-model="activeName">
					<el-tab-pane label="商品链接" name="first">
						<storeList  @productName="classifyCnt" @shop_hidden="shop_hidden">	
							 
						</storeList>
					</el-tab-pane>
    				<el-tab-pane label="商品分类" name="second" >
    					<productClassify   @categorys="categorys" :type="classifyType" :Classify="storeClassify">
								<div class="btn clearfix pt-20 pb-20 border-t">
									<el-button class="store-button2 float-r" @click="dialogFormVisible=false">
										取消
									</el-button>
									<el-button class="store-button1 float-r mr-10" @click="sureclassify">
										确定
									</el-button>
								</div>
							</productClassify>
    				</el-tab-pane>
				</el-tabs>
			</el-dialog>
		</div>
		<button class="w-100 btn-add" @click="addBanner" v-if="disabled">
			<b>+</b>添加海报
			<span>[{{this.banner.length}}/5]</span>
		</button>
		<div v-if="false">{{upBanner}}</div>
	</div>
</template>

<script>
	import imageUpload from "@/components/func/imageUpload"
	import storeList from "@/components/myStore/storeList"
	import productClassify from "@/components/myStore/productClassify"
	import shareMth from '@/utils/shareMth'
	import {existStoreMess} from "@/api/myStore"
	import storeClassify from "@/utils/storeClassify"
	import {deletes} from "@/api/script"
	export default{
		data(){
			return {
				imageType:"shop",
				dialogFormVisible:false,
				activeName:"first",
				bannerIndex:"",
				disabled:true,
				bannershow:"",
				bannerEditor:"",
				classifyName:{},
				classifyType:"单选"
			}
		},
		props:["banner"],
		mixins:[shareMth,storeClassify],
		components:{
			imageUpload,storeList,productClassify
		},
		computed:{
			upBanner(){
				return JSON.parse(JSON.stringify(this.banner))
			}
		},
		created(){
			console.log("this.banner",this.banner)
		},
		updated(){
			//传数据到父集，用于点击跳转链接时保存
			this.upBannerData();
			this.$emit("passBanner",this.bannerEditor)
		},
		methods:{
			//商品分类传过来的数据
			categorys(val){
				this.classifyName=val;				
			},
			sureclassify() {
				this.dialogFormVisible=false;
				var classifyCnt = {
					banner_click_type: "shop_category",
					banner_click_name: this.classifyName.banner_click_name,
					banner_click_id:this.classifyName.banner_click_id
				};
				if (this.classifyName != "") {
					this.classifyCnt(classifyCnt)
				}
			},
			productName(data){
				this.classifyCnt(data)
			},
			updataBanner(data){
				var index=data.index
				var item_new=this.banner[index];
				item_new.banner_url=data.new_url;
			},
			addBanner(){				
				if(JSON.stringify(this.banner.length)==4){
					this.disabled=false
				};
				this.banner.push({
			        id: "",
			        shop_id:"",
			        banner_url:"",
			        banner_click_type: "",
			        banner_click_id: "",
			        banner_click_name:"",
			        sort:""
				});
			},
			indexUp(index){
				this.itemIndexUp(index,this.banner);

			},
			indexDown(index){
				this.itemIndexDown(index,this.banner)
			},
			delte(index){
				this.itemDelte(index,this.banner);
				if(this.banner.length==4){
					this.disabled=true
				};
			},
			showBomb(index){
				//关闭弹窗以及获取顺序
				this.dialogFormVisible = true;
				this.bannerIndex=index;
			},
			shop_hidden(data){
				this.dialogFormVisible=data
			},
			classifyCnt(data){
				//点击弹框的确定按钮（商品分类）
				var banner=this.banner[this.bannerIndex];
				Object.assign(banner,data);
				console.log("banner11111111",banner)
			},
			upBannerData(){
				var id=this.$store.getters.getShop_id;
				var len=this.upBanner.length;
				for(let i=0,max=len;i<max;i++){				
					var banner=["shop_id","sort","banner_click_name",]
					//调用批量删除对象属性的方法
					deletes(banner,this.upBanner[i])
					var banner_click=this.upBanner[i].banner_click_type
					if(banner_click===null||banner_click===undefined){
						delete this.upBanner[i].banner_click_type
					}
					//去除对象里空字符串
					this.deleteEmptyString(this.upBanner[i]);
				};
				//去除数组里的空对象
				this.deleteArrayObject(this.upBanner);
				//上传给后台的数据
				this.bannerEditor={
					banners:this.upBanner
				};
			},
		}
	}
</script>

<style scoped="scoped">
	.item-top{
		line-height: 26px;
		margin-top: 20px;
	}
	.btn-group .Icon{
		height: 24px;
		width: 24px;
		text-align: center;
		line-height: 28px;
		border: 1px solid #D6D6D6;
		border-radius: 2px;
		cursor: pointer;
	}
	.imageUpload{
		width:258px;
		height: 220px;
		margin-top: 10px;
	}
	p.sug{
		display: block;
		text-align: left;
		line-height: 32px;
	}
	p.jump{
		font-family: SourceHanSansCN-Regular;
		font-size: 12px;
		color: #333333;
		text-align: left;
		margin-top: -2px;
	}
	div.link{
		padding: 0 0 0 10px;
	    height: 32px;
	    line-height: 32px;
	    font-size: 12px;
	    color: #333333;
	    border: 1px solid #D6D6D6;
	    border-radius: 2px;
	    margin-top: 8px;
	    text-align: left;
	}
	div.link span{
		display: inline-block;
	    max-width: 208px;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	button.btn-link{
		float: right;
		height: 32px;
		width: 32px;
	   	border:none;
	    border-left: 1px solid #d6d6d6;
	    background-color: transparent;
	    outline: none;
	    cursor: pointer;
	}
	button.btn-add{
	    height: 32px;
	    line-height: 32px;
	    color: #333;
	    text-align: center;
	    border: 1px solid #d6d6d6;
	    border-radius: 2px;
	    background: none;
	    cursor: pointer;
	    outline: none;
	    margin-top: 20px;
	}
	button.btn-add b{
		font-size: 20px;
		vertical-align: bottom;
		margin-right: 5px;
	}
	.btn-edit{
		position: fixed;
		bottom: 0;
		right: 0;
		height: 50px;
		width: 300px;
		border-top: 1px solid #D6D6D6;
		text-align: left;
		background-color: #fff;
		z-index: 550;
	}
	.btn-edit button{
		background: none;
		border: 0;
		cursor: pointer;
		height: 100%;
		width: 49%;
		font-size: 14px;
		color: #333333;
	}
	.btn-edit button:focus{
		outline: none;
	}
	.btn-edit .btn-edit-save{
		border-left: 1px solid #D6D6D6;
		color: #0070C9;
	}
</style>
